<template>
    <el-container style="height: 100%">
        <el-header style="height: auto;border: 1px solid #cccccc;padding: 25px 25px 5px 25px;">
            <el-form :inline="true" :model="queryform" class="search-form-inline" size="mini" @submit.native.prevent
                     label-width="80px">
                <el-form-item label="操作用户:">
                    <el-input v-model="queryform.username" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="时间范围:">
                    <CuDatepicker @update-date="updatedate" :def="false" size="mini"/>
                </el-form-item>
                <el-form-item label="操作事件:">
                    <el-input v-model="queryform.operationAction" placeholder="请输入操作事件"/>
                </el-form-item>
                <el-form-item label="操作结果:">
                    <el-select v-model="queryform.operateResult">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="成功" value="成功"></el-option>
                        <el-option label="失败" value="失败"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit" @click="()=>{
                        pageNo = 1;
                        loadData();
                    }" size="mini">搜索
                    </el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-container>
                <el-header style="height: auto;">
                    <div class="head-title">
                        共有<span class="num">{{ total }}</span>条
                    </div>
                </el-header>
                <el-main>
                    <DynamicTable
                            :columns="tableColumns"
                            :list="tableData" :current-page="currentPage"
                            ref="singleTable"
                            @selection-change="handleSelectionChange"
                    >
                        <template slot="top">
                            <el-table-column type="index" label="序号" width="90" align="center">
                                <template slot-scope="scope">{{ (pageNo - 1) * currentPage + scope.$index + 1 }}</template>
                            </el-table-column>
                        </template>
                        <template slot="end">
                        </template>
                    </DynamicTable>
                </el-main>

            </el-container>
        </el-main>
        <el-footer style="height: auto;">
            <CustomPage
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
            />
        </el-footer>
    </el-container>
</template>

<script>
import CustomPage from '@/common/CustomPageMin';
import CuDatepicker from '@/common/CuDatepicker';
import DynamicTable from '@/common/DynamicTable';

export default {
  name: 'operatelog',
  components: {
    CustomPage,
    DynamicTable,
    CuDatepicker
  },
  data() {
    return {
      queryform: {
        userName: '', // 操作用户
        level: '', // 日志级别
        startDateTime: '',
        endDateTime: '', // 时间范围 下 上
        operationType: '', // 操作类型
        operationAction: '', // 操作事件
        operateResult: ''// 操作结果
      },
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tableColumns: [
        {
          field: 'rackNumber',
          title: '用户名称',
          width: '80px',
        },
        {
          field: 'assetNumber',
          title: '用户IP',
          width: '80px',
        },
        {
          field: 'ip',
          title: '操作事件',
          width: '140px',
        },
        {
          field: 'putaway',
          title: '操作时间',
          width: '100px',
          renderer: (v) => {
            return v.putaway ? new Date(v.putaway).format('yyyy-MM-dd') : '-'
          }
        },
      ],
    };
  },
  methods: {
    updatedate(v) {
      this.queryform.startDateTime = v[0];
      this.queryform.endDateTime = v[1];
    },

    loadData() {
      this.loading = true;
      this.$axiosInstance({
        method: 'get',
        url: '/XXX',
        params: {
          pageNum: (this.currentPage - 1),
          pageSize: this.pageSize,
          ...this.queryform
        }
      }).then((res) => {
        let { code, data } = res.data;
        if (code === 200) {
          this.tableData = data.content;
          this.total = data.total;
          if (data.content.length === 0 && this.currentPage > 0) {
            this.currentPage -= 1;
            this.loadData();
          }
        } else {
          this.tableData = [];
          this.total = 0;
        }
        this.loading = false;
      }).catch((err) => {
        this.loading = false;
      })
    },

    handlequery() {
      this.currentPage = 1;
      this.loadData()
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.loadData()
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadData()
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.loadData();
    });
  }
};
</script>

<style scoped>
    .head-title {
        padding: 5px;
    }

    .num {
        padding: 1px 8px;
        color: #017dbf;
        font-size: 25px;
    }
</style>
